<!-- 专业工作流设计器界面 -->
<div class="workflow-designer-page">
  <!-- 顶部工具栏 -->
  <div class="designer-toolbar" *ngIf="!isLoading">
    <div class="toolbar-left">
      <button class="btn btn-outline-secondary" (click)="goBack()">
        <i class="bi bi-arrow-left"></i> 返回
      </button>
      <h2 class="ms-3 mb-0">
        {{ isEditMode ? '编辑工作流' : '创建新工作流' }}
      </h2>
    </div>
    
    <div class="toolbar-center">
      <!-- 设计器工具 -->
      <div class="btn-toolbar" role="toolbar">
        <div class="btn-group me-2">
          <button class="btn btn-outline-primary" (click)="zoomOut()" title="缩小">
            <i class="bi bi-zoom-out"></i>
          </button>
          <button class="btn btn-outline-primary" (click)="resetZoom()" title="重置缩放">
            {{ (zoom * 100).toFixed(0) }}%
          </button>
          <button class="btn btn-outline-primary" (click)="zoomIn()" title="放大">
            <i class="bi bi-zoom-in"></i>
          </button>
        </div>
        
        <div class="btn-group me-2">
          <button class="btn btn-outline-success" (click)="autoLayout()" title="自动布局">
            <i class="bi bi-diagram-2"></i>
          </button>
          <button 
            class="btn btn-outline-danger" 
            (click)="removeSelectedActivity()"
            [disabled]="!selectedActivity"
            title="删除选中节点">
            <i class="bi bi-trash"></i>
          </button>
        </div>
        
        <div class="btn-group me-2">
          <button 
            class="btn" 
            [class.btn-primary]="isProfessionalMode"
            [class.btn-outline-primary]="!isProfessionalMode"
            (click)="toggleDesignerMode()"
            title="切换设计器模式">
            <i class="bi bi-grid-3x3-gap"></i>
            {{ isProfessionalMode ? '专业模式' : '简单模式' }}
          </button>
        </div>
      </div>
    </div>
    
    <div class="toolbar-right">
      <button class="btn btn-outline-info me-2" (click)="openElsaStudio()">
        <i class="bi bi-box-arrow-up-right"></i> 外部设计器
      </button>
      <button class="btn btn-primary me-2" (click)="saveWorkflow()">
        <i class="bi bi-floppy"></i> 保存
      </button>
      <button class="btn btn-success" (click)="publishWorkflow()">
        <i class="bi bi-rocket"></i> 发布
      </button>
    </div>
  </div>

  <!-- 加载状态 -->
  <div class="loading-container" *ngIf="isLoading">
    <div class="d-flex justify-content-center align-items-center h-100">
      <div class="text-center">
        <div class="spinner-border text-primary mb-3" role="status">
          <span class="visually-hidden">加载中...</span>
        </div>
        <p>正在加载专业工作流设计器...</p>
      </div>
    </div>
  </div>

  <!-- 错误状态 -->
  <div class="error-container" *ngIf="errorMessage && !isLoading">
    <div class="alert alert-danger" role="alert">
      <h4 class="alert-heading">加载失败</h4>
      <p>{{ errorMessage }}</p>
      <hr>
      <button class="btn btn-outline-danger" (click)="goBack()">返回工作流列表</button>
    </div>
  </div>

  <!-- 专业设计器主体 -->
  <div class="professional-designer" *ngIf="!isLoading && !errorMessage && isProfessionalMode">
    <div class="designer-layout">
      
      <!-- 左侧：活动面板 -->
      <div class="activity-panel">
        <div class="panel-header">
          <h6><i class="bi bi-puzzle"></i> 活动工具箱</h6>
        </div>
        <div class="panel-content">
          <!-- 工作流基本信息 -->
          <div class="workflow-info-compact mb-3">
            <div class="form-group mb-2">
              <label class="form-label small">工作流名称</label>
              <input 
                type="text" 
                class="form-control form-control-sm" 
                [(ngModel)]="workflowForm.name"
                placeholder="输入工作流名称">
            </div>
            <div class="form-group mb-2">
              <label class="form-label small">描述</label>
              <textarea 
                class="form-control form-control-sm" 
                rows="2"
                [(ngModel)]="workflowForm.description"
                placeholder="描述工作流用途"></textarea>
            </div>
            <div class="form-check form-switch">
              <input 
                class="form-check-input" 
                type="checkbox" 
                id="isPublishedCompact"
                [(ngModel)]="workflowForm.isPublished">
              <label class="form-check-label small" for="isPublishedCompact">
                {{ workflowForm.isPublished ? '已发布' : '草稿' }}
              </label>
            </div>
          </div>
          
          <!-- 活动类别 -->
          <div class="activity-categories">
            <div 
              class="category-section" 
              *ngFor="let category of activityCategories">
              <div class="category-header" data-bs-toggle="collapse" [attr.data-bs-target]="'#category-' + category.id">
                <i [class]="category.icon"></i>
                <span>{{ category.name }}</span>
                <i class="bi bi-chevron-down float-end"></i>
              </div>
              <div class="collapse show" [id]="'category-' + category.id">
                <div 
                  class="activity-item-compact" 
                  *ngFor="let activity of getActivitiesByCategory(category.id)"
                  (click)="addActivity(activity)"
                  [style.border-left-color]="activity.color">
                  <div class="activity-icon-small">
                    <i [class]="activity.icon" [style.color]="activity.color"></i>
                  </div>
                  <div class="activity-info-small">
                    <div class="activity-name-small">{{ activity.name }}</div>
                    <div class="activity-desc-small">{{ activity.description }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间：可视化画布 -->
      <div class="canvas-panel">
        <div class="canvas-header">
          <div class="canvas-info">
            <span class="badge bg-primary me-2">{{ workflowForm.activities.length }} 节点</span>
            <span class="badge bg-info me-2">{{ workflowForm.connections.length }} 连接</span>
            <span class="text-muted small" *ngIf="selectedActivity">
              已选中: {{ selectedActivity.name }}
            </span>
          </div>
          <div class="canvas-controls">
            <small class="text-muted">双击画布添加节点 | 拖拽移动节点 | 滚轮缩放 | 右键或Shift+点击连接节点</small>
          </div>
        </div>
        
        <div class="canvas-container" #designerContainer>
          <canvas 
            #designerCanvas
            class="workflow-canvas-pro"
            [width]="canvasWidth"
            [height]="canvasHeight">
            您的浏览器不支持 Canvas
          </canvas>
          
          <!-- 画布覆盖层（用于显示提示信息） -->
          <div class="canvas-overlay" *ngIf="workflowForm.activities.length === 0">
            <div class="overlay-content">
              <i class="bi bi-diagram-3 text-muted" style="font-size: 4rem;"></i>
              <h5 class="mt-3 text-muted">工作流画布为空</h5>
              <p class="text-muted">从左侧工具箱拖拽活动，或双击画布添加节点</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：属性面板 -->
      <div class="properties-panel">
        <div class="panel-header">
          <h6><i class="bi bi-sliders"></i> 属性设置</h6>
        </div>
        <div class="panel-content">
          
          <!-- 选中节点属性 -->
          <div *ngIf="selectedActivity; else noSelection">
            <div class="node-header">
              <div class="node-icon" [style.background-color]="getActivityType(selectedActivity.type)?.color">
                <i [class]="getActivityType(selectedActivity.type)?.icon"></i>
              </div>
              <div class="node-info">
                <h6 class="mb-1">{{ selectedActivity.name }}</h6>
                <small class="text-muted">{{ getActivityType(selectedActivity.type)?.description }}</small>
              </div>
            </div>
            
            <hr>
            
            <!-- 基本属性 -->
            <div class="property-section">
              <label class="form-label small"><strong>节点名称</strong></label>
              <input 
                type="text" 
                class="form-control form-control-sm mb-2"
                [(ngModel)]="selectedActivity.name"
                (ngModelChange)="redrawCanvas()">
            </div>
            
            <!-- 自定义属性 -->
            <div class="property-section" *ngIf="getActivityType(selectedActivity.type)?.properties && getActivityType(selectedActivity.type)!.properties.length > 0">
              <h6 class="mb-2"><i class="bi bi-gear"></i> 配置参数</h6>
              
              <div 
                class="property-item-pro mb-3" 
                *ngFor="let prop of getActivityType(selectedActivity.type)?.properties">
                <label class="form-label small">
                  {{ prop.label }}
                  <span class="text-danger" *ngIf="prop.required">*</span>
                </label>
                
                <!-- 文本输入 -->
                <input 
                  *ngIf="prop.type === 'text'"
                  type="text" 
                  class="form-control form-control-sm"
                  [(ngModel)]="selectedActivity.properties[prop.name]"
                  [placeholder]="prop.label"
                  [required]="prop.required">
                
                <!-- 数字输入 -->
                <input 
                  *ngIf="prop.type === 'number'"
                  type="number" 
                  class="form-control form-control-sm"
                  [(ngModel)]="selectedActivity.properties[prop.name]"
                  [placeholder]="prop.label"
                  [required]="prop.required">
                
                <!-- 文本域 -->
                <textarea 
                  *ngIf="prop.type === 'textarea'"
                  class="form-control form-control-sm"
                  rows="3"
                  [(ngModel)]="selectedActivity.properties[prop.name]"
                  [placeholder]="prop.label"
                  [required]="prop.required"></textarea>
                
                <!-- 选择框 -->
                <select 
                  *ngIf="prop.type === 'select'"
                  class="form-select form-select-sm"
                  [(ngModel)]="selectedActivity.properties[prop.name]"
                  [required]="prop.required">
                  <option value="">选择{{ prop.label }}</option>
                  <option 
                    *ngFor="let option of prop.options"
                    [value]="option">
                    {{ option }}
                  </option>
                </select>
                
                <small class="form-text text-muted" *ngIf="prop.default">
                  默认值: {{ prop.default }}
                </small>
              </div>
            </div>
            
            <!-- 连接管理 -->
            <div class="property-section">
              <h6 class="mb-2"><i class="bi bi-arrow-left-right"></i> 连接管理</h6>
              <div class="connection-list">
                <div class="small text-muted mb-2">从此节点的连接:</div>
                <div 
                  class="connection-item" 
                  *ngFor="let connection of workflowForm.connections; let i = index"
                  [hidden]="connection.source !== selectedActivity.id">
                  <span class="me-2">→ {{ getActivityName(connection.target) }}</span>
                  <button 
                    class="btn btn-sm btn-outline-danger"
                    (click)="removeConnection(i)">
                    <i class="bi bi-x"></i>
                  </button>
                </div>
                
                <div class="small text-muted mb-2 mt-2">连接到此节点:</div>
                <div 
                  class="connection-item" 
                  *ngFor="let connection of workflowForm.connections"
                  [hidden]="connection.target !== selectedActivity.id">
                  <span class="me-2">← {{ getActivityName(connection.source) }}</span>
                </div>
              </div>
            </div>
            
            <!-- 节点操作 -->
            <div class="property-section">
              <h6 class="mb-2"><i class="bi bi-tools"></i> 节点操作</h6>
              <div class="d-grid gap-2">
                <button 
                  class="btn btn-outline-primary btn-sm"
                  (click)="duplicateActivity()">
                  <i class="bi bi-files"></i> 复制节点
                </button>
                <button 
                  class="btn btn-outline-danger btn-sm"
                  (click)="removeSelectedActivity()">
                  <i class="bi bi-trash"></i> 删除节点
                </button>
              </div>
            </div>
          </div>
          
          <ng-template #noSelection>
            <div class="no-selection text-center py-4">
              <i class="bi bi-mouse text-muted" style="font-size: 2rem;"></i>
              <h6 class="mt-2 text-muted">未选中节点</h6>
              <p class="small text-muted">点击画布中的节点查看和编辑其属性</p>
            </div>
          </ng-template>
        </div>
      </div>
    </div>
  </div>

  <!-- 简单设计器（保留原有功能） -->
  <div class="simple-designer" *ngIf="!isLoading && !errorMessage && !isProfessionalMode">
    <div class="container-fluid h-100">
      <div class="row h-100">
        
        <!-- 左侧：活动面板 -->
        <div class="col-md-3 activity-panel">
          <div class="panel-content">
            <h5 class="panel-title">
              <i class="bi bi-puzzle"></i> 活动库
            </h5>
            <p class="text-muted small">点击活动添加到工作流中</p>
            
            <div class="activity-list">
              <div 
                class="activity-item" 
                *ngFor="let activity of availableActivities"
                (click)="addActivity(activity)">
                <div class="activity-icon">
                  <i [class]="activity.icon"></i>
                </div>
                <div class="activity-info">
                  <div class="activity-name">{{ activity.name }}</div>
                  <div class="activity-description">{{ activity.description }}</div>
                </div>
                <div class="activity-add">
                  <i class="bi bi-plus-circle"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间：工作流画布 -->
        <div class="col-md-6 workflow-canvas">
          <div class="canvas-content">
            <!-- 工作流基本信息 -->
            <div class="workflow-info mb-4">
              <div class="row">
                <div class="col-md-8">
                  <div class="form-group mb-3">
                    <label for="workflowName" class="form-label">工作流名称</label>
                    <input 
                      type="text" 
                      id="workflowName"
                      class="form-control" 
                      [(ngModel)]="workflowForm.name"
                      placeholder="输入工作流名称">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group mb-3">
                    <label class="form-label">状态</label>
                    <div class="form-check form-switch">
                      <input 
                        class="form-check-input" 
                        type="checkbox" 
                        id="isPublished"
                        [(ngModel)]="workflowForm.isPublished">
                      <label class="form-check-label" for="isPublished">
                        {{ workflowForm.isPublished ? '已发布' : '草稿' }}
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="form-group mb-3">
                <label for="workflowDescription" class="form-label">描述</label>
                <textarea 
                  id="workflowDescription"
                  class="form-control" 
                  rows="2"
                  [(ngModel)]="workflowForm.description"
                  placeholder="描述这个工作流的用途"></textarea>
              </div>
            </div>

            <!-- 工作流步骤 -->
            <div class="workflow-steps">
              <h6 class="mb-3">
                <i class="bi bi-list-ol"></i> 工作流步骤 
                <span class="badge bg-secondary ms-2">{{ workflowForm.activities.length }}</span>
              </h6>
              
              <div class="steps-container" *ngIf="workflowForm.activities.length > 0; else noSteps">
                <!-- 开始节点 -->
                <div class="step-node start-node">
                  <i class="bi bi-play-circle"></i>
                  <span>开始</span>
                </div>
                
                <!-- 活动步骤 -->
                <div 
                  class="step-node activity-node" 
                  *ngFor="let activity of workflowForm.activities; let i = index">
                  
                  <div class="step-header">
                    <div class="step-info">
                      <i [class]="getActivityType(activity.type)?.icon || 'bi-gear'"></i>
                      <span class="step-name">{{ activity.name }}</span>
                    </div>
                    <div class="step-actions">
                      <button 
                        class="btn btn-sm btn-outline-secondary"
                        (click)="moveActivityUp(i)"
                        [disabled]="i === 0"
                        title="上移">
                        <i class="bi bi-arrow-up"></i>
                      </button>
                      <button 
                        class="btn btn-sm btn-outline-secondary"
                        (click)="moveActivityDown(i)"
                        [disabled]="i === workflowForm.activities.length - 1"
                        title="下移">
                        <i class="bi bi-arrow-down"></i>
                      </button>
                      <button 
                        class="btn btn-sm btn-outline-danger"
                        (click)="removeActivity(i)"
                        title="删除">
                        <i class="bi bi-trash"></i>
                      </button>
                    </div>
                  </div>
                  
                  <div class="step-properties" *ngIf="getActivityType(activity.type)?.properties && getActivityType(activity.type)!.properties.length > 0">
                    <div 
                      class="property-item" 
                      *ngFor="let prop of getActivityType(activity.type)?.properties">
                      <label class="form-label small">{{ prop.label }}</label>
                      
                      <!-- 文本输入 -->
                      <input 
                        *ngIf="prop.type === 'text'"
                        type="text" 
                        class="form-control form-control-sm"
                        [(ngModel)]="activity.properties[prop.name]"
                        [placeholder]="prop.label">
                      
                      <!-- 数字输入 -->
                      <input 
                        *ngIf="prop.type === 'number'"
                        type="number" 
                        class="form-control form-control-sm"
                        [(ngModel)]="activity.properties[prop.name]"
                        [placeholder]="prop.label">
                      
                      <!-- 文本域 -->
                      <textarea 
                        *ngIf="prop.type === 'textarea'"
                        class="form-control form-control-sm"
                        rows="2"
                        [(ngModel)]="activity.properties[prop.name]"
                        [placeholder]="prop.label"></textarea>
                      
                      <!-- 选择框 -->
                      <select 
                        *ngIf="prop.type === 'select'"
                        class="form-select form-select-sm"
                        [(ngModel)]="activity.properties[prop.name]">
                        <option value="">选择{{ prop.label }}</option>
                        <option 
                          *ngFor="let option of prop.options"
                          [value]="option">
                          {{ option }}
                        </option>
                      </select>
                    </div>
                  </div>
                  
                  <!-- 连接线 -->
                  <div class="step-connector" *ngIf="i < workflowForm.activities.length - 1">
                    <div class="connector-line"></div>
                    <div class="connector-arrow">
                      <i class="bi bi-arrow-down"></i>
                    </div>
                  </div>
                </div>
                
                <!-- 结束节点 -->
                <div class="step-node end-node">
                  <i class="bi bi-stop-circle"></i>
                  <span>结束</span>
                </div>
              </div>
              
              <ng-template #noSteps>
                <div class="no-steps text-center py-5">
                  <i class="bi bi-diagram-3 text-muted" style="font-size: 3rem;"></i>
                  <h5 class="mt-3 text-muted">工作流为空</h5>
                  <p class="text-muted">从左侧活动库中选择活动开始构建您的工作流</p>
                </div>
              </ng-template>
            </div>
          </div>
        </div>

        <!-- 右侧：帮助面板 -->
        <div class="col-md-3 help-panel">
          <div class="panel-content">
            <h5 class="panel-title">
              <i class="bi bi-question-circle"></i> 帮助信息
            </h5>
            
            <div class="help-sections">
              <div class="help-section">
                <h6><i class="bi bi-lightbulb"></i> 快速入门</h6>
                <ul class="help-list">
                  <li>点击左侧活动添加到工作流中</li>
                  <li>配置每个活动的属性</li>
                  <li>使用箭头按钮调整活动顺序</li>
                  <li>保存工作流以便后续使用</li>
                </ul>
              </div>
              
              <div class="help-section">
                <h6><i class="bi bi-info-circle"></i> 活动说明</h6>
                <div class="activity-help" *ngFor="let activity of availableActivities">
                  <strong>{{ activity.name }}</strong>
                  <p class="small text-muted">{{ activity.description }}</p>
                </div>
              </div>
              
              <div class="help-section">
                <h6><i class="bi bi-tools"></i> 高级选项</h6>
                <p class="small">需要更强大的设计器功能？</p>
                <button class="btn btn-outline-primary btn-sm" (click)="toggleDesignerMode()">
                  <i class="bi bi-grid-3x3-gap"></i>
                  切换到专业模式
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
